<template>
  <div class="easy-container flex align-items-center">
    <el-avatar :src="member.avatar" class="m-r-10 shrink-0" />
    <div class="flex-1" style="min-width: 0;">
      <div class="flex align-items-center">
        <router-link
          :to="`/users/${member.id}`"
          class="title link line1"
          target="_blank"
          :title="member.nickname">
          {{ member.nickname }}
        </router-link>
        <el-tag v-if="member.id === curUser.id" size="mini">你自己</el-tag>
      </div>
      <timeago2 :date-time="member.created_at" pre-text="加入于 " />
    </div>
    <div class="shrink-0">
      <members-level-select
        v-if="editing && member.id !== curUser.id"
        :member="member"
        style="max-width: 6rem;"
      />
      <el-tag v-else type="info" disable-transitions>{{ levelCN }}</el-tag>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import MembersLevelSelect from './members-level-select';

export default {
  name: 'members-list-item',
  components: {
    MembersLevelSelect,
  },
  props: {
    member: Object,
    editing: Boolean,
  },
  computed: {
    ...mapState({
      curUser: 'currentUser',
    }),
    levelCN() { return this.$C.spaces.levelCN[this.member.level]; },
  },
};
</script>

<style></style>
